<template>
  <div class="status-panel">
    <!-- 标题 -->
    <div class="panel-header">
      <h3 class="panel-title">DJI Air 3S 畅飞套装</h3>
   
    </div>
    <!-- 内容 -->
    <div class="panel-content">
      <!-- 名称 -->
      <div class="panel-video-top"></div>
      <div class="panel-video-box">

        

      </div>
    
    </div>
  </div>
  
 
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElImage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import CommonDialog from '@/components/CommonDialog.vue'
import foldPanelIcon from '@/assets/icons/icon_fold_up_panel2.png' // 收起面板icon
import meteorologicalCloudsIcon from '@/assets/icons/icon_meteorological_clouds.png' // 气象云icon
import taskExecutionIcon from '@/assets/icons/icon_task_status.png' // 任务状态icon
import cockpitPanelIcon from '@/assets/icons/icon_cockpit_panel.png' // 驾驶舱面板icon
import flightParameterSettingIcon from '@/assets/icons/icon_UAV.png' // 飞行参数设置icon
import weatherIcon from '@/assets/icons/icon_weather.png' // 天气icon
import temperatureIcon from '@/assets/icons/icon_temperature.png' // 温度icon
import windSpeedIcon from '@/assets/icons/icon_wind_speed.png' // 风速icon
import taskStatusPointIcon from '@/assets/icons/icon_status_point.png' // 任务状态点icon


const switchValue1 = ref(false) // 调过面板开关开启状态

const taskStatusUAVImage = ref('https://s21.ax1x.com/2025/07/13/pVlfgAJ.png') // 任务状态里用到的图片

// 飞行参数设置变量
const flightLight = ref(false) // 飞行器夜航灯
const limitHeight = ref('') // 限高
const avoidance = ref(false) // 避障
const limitDistance = ref('') // 限远
const batteryMaintenance = ref(true) // 电池保养状态

// 任务执行弹窗
const taskExecuteDialogVisible = ref(false)
const taskSearchKeyword = ref('') // 任务搜索关键词

// 响应式视口宽度
const viewportWidth = ref(window.innerWidth)

// 监听窗口大小变化
const handleResize = () => {
  viewportWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

// px转vw计算函数
const px2vw = (px) => {
  return (px / 1920) * viewportWidth.value
}

// 计算表格高度
const tableHeight = computed(() => {
  return px2vw(172)
})

// 计算列宽
const columnWidths = computed(() => ({
  no: px2vw(143),
  taskName: px2vw(210),
  updateTime: px2vw(160)
}))

// 当前选中的行索引
const currentSelectedRow = ref(null)

// 任务表格数据
const taskTableData = ref([
  {
    no: '01',
    taskName: '任务名称示例1',
    updateTime: '2025-01-13 14:30:00'
  },
  {
    no: '02',
    taskName: '任务名称示例2',
    updateTime: '2025-01-13 14:25:00'
  },
  {
    no: '03',
    taskName: '任务名称示例3',
    updateTime: '2025-01-13 14:20:00'
  }
])

// 表头样式
const taskHeaderCellStyle = () => {
  return {
    background: 'transparent',
    color: 'rgba(175, 215, 230, 1)',
    fontSize: '16px',
    fontWeight: '500',
    letterSpacing: '0px',
    lineHeight: '31px',
    border: 'none',
    padding: '0',
    height: '31px'
  }
}

// 行样式类名
const taskTableRowClassName = ({ rowIndex }) => {
  const baseClass = rowIndex % 2 === 0 ? 'even-row' : 'odd-row'
  return currentSelectedRow.value === rowIndex ? `${baseClass} selected-row` : baseClass
}

// 处理行点击
const handleRowClick = (row, column, event) => {
  const index = taskTableData.value.findIndex(item => item === row)
  currentSelectedRow.value = index
}

// 处理任务执行点击
const handleTaskExecute = () => {
  taskExecuteDialogVisible.value = true
}

// 处理任务执行确定
const handleConfirmTaskExecute = () => {
  // 这里处理任务执行的逻辑
  console.log('执行任务')
  taskExecuteDialogVisible.value = false
}



</script>

<style lang="scss" scoped>
// 引入 Element Plus 组件样式覆盖
@import '@/style/element-overrides.scss';

.status-panel {
  width: 1380px;
  height: 903px;
  background: url('@/assets/images/video_airline_bg.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  
  .panel-header {
    width: 100%;
    height: 38px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    
    .panel-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      vertical-align: top;
      background: linear-gradient(180deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 40%, rgba(59, 135, 202, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
      position: relative;
      bottom: -2px;
    }

    
  }
  
  .panel-content {
    flex: 1;
    width: 100%;
    padding: 30px 16px 16px;
    box-sizing: border-box;
    // 名称
    .panel-video-top {
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      vertical-align: top;
      background: linear-gradient(180deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 40%, rgba(59, 135, 202, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
    }

    // 视频播放模块
    .panel-video-box{
      width: 100%;
      height: 800px;
      background: url('@/assets/images/video_source.png') no-repeat center center;
      background-size: 87px 114px;
    }

  }
}


</style>